#include('../header.html', {title: '个人信息'})

<div id="user-home" style="background-color: #fff;">
  <div class="user-center-header has-blurr" data-sharpness="40" style="height: 220px; overflow: hidden; position: relative; background: rgb(0, 0, 0);">
    <div class="blurr-bg" style="background: url('/static/img/pk.jpg') center center / 150%; left: 0px; right: 0px; top: -50px; bottom: -50px; width: 965px; filter: blur(60px); z-index: 50; position: absolute;"></div>
    <div class="container clearfix" style="position: absolute; left: 0px; right: 0px; z-index: 100;">

      <div class="user-avatar">
        <div class="avatar-wrap">
          <img class="avatar-lg" src="/static/img/pk.jpg">
        </div>
        <div class="name">{{user.username}}</div>
        <div class="position">
          <span class="mrm">{{user.title != null ? user.title : '暂无头衔'}}</span>
        </div>
      </div>

      <div class="user-about hidden-sm hidden-xs">
        <div class="user-about-content">
          {{user.sign != null ? user.sign : '暂无签名'}}
        </div>
      </div>
    </div>
    <div class="mask" style="position: absolute; left: 0px; right: 0px; z-index: 100;"></div>
  </div>

  <div id="content-container" class="container">
    <!--导航栏-->
    <ul class="nav nav-tabs clearfix">
      <li @click="switchTab(0)"><a href="javascript:">个人介绍</a></li>
      <li @click="switchTab(1)"><a href="javascript:">在学课程</a></li>
      <li @click="switchTab(2)"><a href="javascript:">收藏课程</a></li>
      <li @click="switchTab(3)" v-if="user.role > 1"><a href="javascript:">在教课程</a></li>
    </ul>

    <!--标签页内容区-->
    <div style="width: 100px; height: 160px; margin: 0 auto;" v-show="loading" class="infinite-loading"></div>
    <div class="nav-content"> </div>

  </div>
</div>
<script>
  // 对应简介，在教课程，正在学习，收藏课程
  var tabs = ['intro', 'learning', 'collection', 'teaching'];
  var vm = new Vue({
    el: '#user-home',
    data: {
      tabIndex: 2,
      loading: false,
      user: {},
      type: '',
      uid: '${uid}'
    },
    methods: {
      getUser: function () {
        var userVm = this;
        $.post('/user/' + userVm.uid, function (data) {
          if (data.success) {
            userVm.user = data.payload;
          }
        })
      },
      switchTab: function (index) {
        this.tabIndex = index;
      },
      loadTab: function () {
        var box = $('.nav-content');
        box.html('');
        this.loading = true;
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'home/' + tabs[this.tabIndex], true);
        xhr.onload = function (e) {
          var code = e.target.status;
          if (code == 200) {
            box.html(e.target.responseText);
          } else {
            var msg = e.target.statusText;
            box.html('<div class="text-center"><h4>' + code + '</h4><p>' + msg + '</p></div>');
          }
          vm.loading = false;
        };
        xhr.onerror = function (e) {
          vm.loading = false;
        };
        xhr.send();
      },
      changeTabStyle: function (nv) {
        var lis = document.querySelectorAll(".nav-tabs > li");
        for (var i = 0; i < lis.length; i++) {
          var li = lis[i];
          if (i !== nv) {
            if (li.classList.contains('active')){
              li.classList.remove('active');
            }
          } else {
            li.classList.add('active');
            this.loadTab();
          }
        }
      }
    },
    watch: {
      tabIndex: function (nv, ov) {
        if (nv !== ov) {
          this.changeTabStyle(nv);
        }
      }
    },
    mounted: function () {
      this.getUser();
      this.loadTab();
      this.changeTabStyle(this.tabIndex);
    }
  });
</script>
#include('../footer.html')